<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/refundManagement'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付时间">
            <el-date-picker
              @change="changeDate"
              v-model="date"
              value-format="yyyy-MM-dd"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="支付方式">

            <el-select clearable v-model="paging.pay_type" placeholder="请选择">
              <el-option label="免单支付" value="1"> </el-option>
              <el-option label="现金" value="2"> </el-option>
              <el-option label="银行卡" value="3"> </el-option>
              <el-option label="微信" value="4"> </el-option>
              <el-option label="支付宝" value="5"> </el-option>
              <el-option label="会员卡余额" value="6"> </el-option>
              <el-option label="大众点评（团购)" value="7"> </el-option>
              <el-option label="大众点评（预定）" value="8"> </el-option>
              <el-option label="口碑" value="9"> </el-option>
              <el-option label="WOW" value="10"> </el-option>
              <el-option label="小程序" value="11"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="paging.out_trade_no" type="text"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select clearable v-model="paging.status" placeholder="请选择">
              <el-option label="退款中" value="6"> </el-option>
              <el-option label="已退款" value="7"> </el-option>
              <el-option label="部分退款" value="9"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <!-- <div class="operation-box clear-float">
          <el-button
            icon="el-icon-plus"
            @click="isInfo = true"
            style="margin-left: auto"
            type="primary"
            >新增</el-button
          >
        </div> -->
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <!-- <el-table-column prop="username" label="支付流水编号" min-width="150">
          </el-table-column> -->
          <el-table-column label="流水类型" min-width="150">
            <template slot-scope="scope">
              <span>{{
                scope.row.is_market == 1 ? "商品流水" : "项目流水"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="订单金额（元）" min-width="150">
          </el-table-column>
          <el-table-column prop="coupon_money" label="优惠金额" min-width="150">
          </el-table-column>
          <el-table-column
            prop="orders_payable"
            label="实际支付金额"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="return_money"
            label="实际退款金额"
            min-width="150"
          >
          </el-table-column>
          <el-table-column prop="pay_type" label="支付方式" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.pay_type == 1">余额</span>
              <span v-if="scope.row.pay_type == 2">微信</span>
              <span v-if="scope.row.pay_type == 3">支付宝</span>
              <!-- <span
                style="margin: 0 4px"
                v-for="(ele, index) in scope.row.payText"
                :key="index"
                >{{ ele }}</span
              > -->
            </template>
          </el-table-column>
          <el-table-column
            prop="pay_time"
            label="支付时间"
            min-width="150"
          ></el-table-column>
          <!-- 点击订单编号可跳转到订单列表页查询 -->
          <el-table-column prop="out_trade_no" label="订单编号" min-width="150">
          </el-table-column>
          <el-table-column prop="create_time" label="退款状态" min-width="150">
            <template slot-scope="scope">
              <!-- 点击退款，显示退款中状态，已完成退款，显示退款完成 -->
              <span>{{ scope.row.status | typeStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="return_remark"
            label="退款原因"
            min-width="150"
          >
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      paging: {
        pay_type: "",
        store_id: "",
        is_return: 1,
        pay_date_start: "",
        pay_date_end: "",
        status: "",
        page: 1,
        total: 0,
        limit: 10,
      },
      form: {
        date: "",
      },
      tableData: [],
      storeList: [],
    };
  },
  async created() {
    await this.getAllStoreList();
    await this.repairGetList();
  },
  filters: {
    typeName(val) {
      switch (val) {
        case "1":
          val = "免单支付";
          break;
        case "2":
          val = "现金结账";
          break;
        case "3":
          val = "银行卡";
          break;
        case "4":
          val = "微信";
          break;
        case "5":
          val = "支付宝";
          break;
        case "6":
          val = "会员卡余额";
          break;
        case "7":
          val = "大众点评（团购）";
          break;
        case "8":
          val = "大众点评（预定）";
          break;
        case "9":
          val = "口碑";
          break;
        case "10":
          val = "wow";
          break;
        case "11":
          val = "小程序";
          break;
      }
      return val;
    },
    typeStatus(val) {
      switch (val) {
        case 6:
          val = "待验证";
          break;
        case 7:
          val = "已退款";
          break;
        case 9:
          val = "部分退款";
          break;
      }
      return val;
    },
  },
  methods: {
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
        this.paging.store_id = data[0].id;
      }
    },
    changeDate(e) {
      this.paging.pay_date_start = e[0];
      this.paging.pay_date_end = e[1];
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.ordersgetOrders(this.paging);
      this.loading = false;
      if (code) {
        data.data.forEach((ele) => {
          ele.price = ele.orders_payable * 1 + ele.coupon_money * 1;
        });
        let arr = [
          "免单支付",
          "现金",
          "银行卡",
          "微信",
          "支付宝",
          "会员卡余额",
          "大众点评（团购)",
          "大众点评（预定）",
          "口碑",
          "WOW",
          "小程序",
          "实体卡券",
          "正大无限卡",
          "其他",
          "次卡",
          "大众点评"
        ];
        data.data.forEach((ele) => {
          ele.pay_type = String(ele.pay_type).split(",");
          let pay = [];
          ele.pay_type.forEach((list, index) => {
            pay.push(arr[list * 1 - 1]);
          });
          ele.payText = pay;
        });
        this.tableData = data.data;
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    async setRow(type, row) {
      this.utils.goUrl("/technicianSurfaceDetails?type=" + type);
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.date = "";
      this.paging.store_id = this.storeList[0].id;
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
</style>